<template>
	<view class="content">
		<view>
			<view class="title">选择难度</view>
			<radio-group name="radio" class="labFather" @change="radioChange">
				<label>
					<radio value="10" :checked="isCheck1" /><text>一位数</text>
				</label>
				<label>
					<radio value="100" :checked="isCheck2" /><text>两位数</text>
				</label>
				<label>
					<radio value="1000" :checked="isCheck3" /><text>三位数</text>
				</label>
			</radio-group>
		</view>
		<view class="textBut">
			<view class="text"><text>屏幕常亮</text></view>
			<view class=""><switch name="switch" @change="switChange" :checked="isActive" /></view>
		</view>
		<view><button class="but" type="primary" @click="subClick">保存</button></view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	
	export default {
		inject: ['popup'],
		data() {
			return {
				isChangeCheck: false,
				isCheckValue: null,
				isCheck1: null,
				isCheck2: null,
				isCheck3: null,
				isChangeActiv: false,
				isActiveValue: false,
				isActive: false
			}
		},
		computed: {
		  ...mapGetters(['getterDigit'])
		},
		watch: {
		  getterDigit(message) {
		    this.changeMsg()
		  }
		},
		methods: {
			radioChange(e) {
				this.isChangeCheck = true
				this.isCheckValue = e.detail.value
			},
			switChange(e) {
				this.isChangeActiv = true
				this.isActiveValue = e.detail.value
			},
			subClick() {
				if(this.isChangeCheck) {
					uni.setStorage({
						key: 'digit',
						data: this.isCheckValue
					});
					this.isCheckFun(this.isCheckValue)
					this.$store.dispatch('change',this.isCheckValue)
					this.isChangeCheck = false
				}
				if(this.isChangeActiv) {
					uni.setStorage({
						key: 'isActive',
						data: this.isActiveValue
					});
					this.isActive = this.isActiveValue
					uni.setKeepScreenOn({
						keepScreenOn: this.isActive
					})
					this.isChangeActiv = false
				}
				this.popup.close()
			},
			isCheckFun(e) {
				switch(Number(e)) {
					case 10:
					this.isCheck1 = true;
					this.isCheck2 = false;
					this.isCheck3 = false;
					this.isCheckValue = 10;
					break;
					case 100:
					this.isCheck1 = false;
					this.isCheck2 = true;
					this.isCheck3 = false;
					this.isCheckValue = 100;
					break;
					case 1000:
					this.isCheck1 = false;
					this.isCheck2 = false;
					this.isCheck3 = true;
					this.isCheckValue = 1000;
					break;
					default:
					this.isCheck1 = false;
					this.isCheck2 = false;
					this.isCheck3 = false;
					this.isCheckValue = 100;
					break;
				}
			},
			isActiveFun(e) {
				this.isActive = Boolean(e)
			},
			changeMsg() {
				let that = this
				uni.getStorage({
					key: 'digit',
					success(res) {
						that.isCheckFun(res.data)
					}
				})
				uni.getStorage({
					key: 'isActive',
					success(res) {
						that.isActiveFun(res.data)
					}
				})
			}
		},
		created() {
			let that = this
			uni.getStorage({
				key: 'digit',
				success(res) {
					that.isCheckFun(res.data)
				}
			}),
			uni.getStorage({
				key: 'isActive',
				success(res) {
					that.isActiveFun(res.data)
				}
			})
		}
	}
</script>

<style>
	.content {
		background-color: #efbf7b;
		width: 700upx;
		border-radius: 10upx;
		height: 400upx;
		padding: 20upx;
	}
	.title{
		font-weight: 800;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 40upx;
	}
	.labFather{
		display: flex;
		justify-content: space-around;
		height: 80upx;
		line-height: 80upx;
	}
	.textBut{
		display: flex;
		justify-content: space-between;
		border-top: 4upx solid #96876f;
		height: 100upx;
		line-height: 100upx;
		margin: 10upx;
	}
	.text{
		font-weight: 800;
		font-size: 40upx;
	}
	.but {
		margin: 20upx 0;
		height: 100upx;
		line-height: 100upx;
		font-size: 40upx;
		background-color: #f2e2c4;
		color: #000000;
		font-weight: 800;
		font-size: 40upx;
	}
</style>
